<template>
	<div class="book">
		<img :src="book.bigImgUrl" />
		<div>
			<div class="bookInfo">
				<h3>{{book.title}}</h3>
				<p>{{book.slogan}}</p>
				<p>
					<span>作者:{{book.author}}</span>
					<span>出版社:{{book.bookConcern}}</span>
					<span>出版日期:{{book.publishDate}}</span>
				</p>
				<p>
					<span class="factPrice">{{currency(factPrice(book.price,book.discount))}}</span>
					<span class="discount">[{{formatDiscount(book.discount)}}]</span>
					<span>[定价<i class="price">{{currency(book.price)}}</i>]</span>
				</p>
			</div>
			<div class="addCart">
				<AddSubtractButton :quantity="quantity" @updateQuantity="handleUpdate"></AddSubtractButton>
				<button class="addCartButton" @click="addCart(book)">加入购物车</button>
			</div>
		</div>
		<BookTabComponent :content="book.detail"></BookTabComponent>
	</div>
</template>

<script>
	import AddSubtractButton from '@/components/Book/AddSubtractButton'
	import BookTabComponent from '@/components/Book/BookTabComponent'
	import {
		mapActions
	} from 'vuex'
	export default {
		name: 'Book',
		inject:['factPrice','currency'],
		data() {
			return {
				book: {},
				quantity: 0
			}
		},
		components: {
			AddSubtractButton,
			BookTabComponent
		},
		created() {
			this.axios.get(this.$route.fullPath).then(response => {
				if (response.status == 200) {
					this.book = response.data
				}
			}).catch(error => console.log(error))
		},
		methods: {
			// 子组件AddSubtractButton的自定义事件updateQuantity的处理函数
			handleUpdate(value) {
				this.quantity = value
			},
			addCart(book) {
				let quantity = this.quantity
				if (quantity == 0) {
					quantity = 1
				}
				let newItem = {
					...book,
					price: this.factPrice(book.price, book.discount)
				}
				this.addProductToCart({...newItem,quantity})
				this.$router.push('/cart')
			},
			// 格式化折扣数据
			formatDiscount(value){
				if(value){
					let strDigits = value.toString().substring(2)
					strDigits += '折'
					return strDigits
				}else{
					return value
				}
			},
			...mapActions('cart',[
				// 将this.addProductToCart映射为this.$store.dispatch('cart/addProductToCart')
				'addProductToCart'
			])
		}
	}
</script>

<style scoped>
.book {
  width: 1100px;
  margin-top: 60px;
  text-align: left;
}
.book img {
  margin-left: 50px;
  float: left;
  width: 200px;
  height: 200px;
}
.book .bookInfo {
  margin-left: 20px;
  float: left;
  width: 800px;
  background-color: #eee;
  padding-left: 20px;
  padding-top: 5px;
}

.book .addCart {
  margin-left: 300px;
  float: left;
  margin-top: 10px;
}
.book .addCartButton{
	padding: 5px 10px 6px;
	color: #fff;
	border: none;
	border-bottom: solid 1px #222;
	border-radius: 5px;
	box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 3px #444;
	cursor: pointer;
  background-color: #e33100;
  display: block;
  margin-left: 80px;
}
.addCartButton:hover {
  text-shadow: 0 1px 1px #444;
}

.book span{
  padding-right: 15px;
}

.book .price {
  color: gray;
  text-decoration: line-through;
}
.book .discount{
  color: red;
}
.book .factPrice{
  color: red;
  font-weight: bold;
}
</style>
